<template>
  <div class="inner-page">
    <div class="inner-page-title mb-30">
      <span>云原生数据库TeleDB for MySQL</span>
      <div class="fr">
        <span class="btn">演示动画</span>
        <span class="btn">产品试用</span>
      </div>
    </div>
    <div class="flex-row">
      <div class="left-row flex-1 pr-20">
        <div class="section-title">
          <svg-icon iconName="biaoti1" class="mr-10"></svg-icon>产品介绍
        </div>
        <div class="fs-14 f-normal mt-20 mb-20">
          TeleDB for MySQL
          是完全兼容开源MySQL的企业级智能化关系型数据库PaaS平台，提供高可用、高可靠、
          高安全、高性能、易扩展、易管理的企业级数据库服务，实现数据库RPO=0方案，可用性SLA最高99.99%。
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti2" class="mr-10"></svg-icon>核心能力
        </div>
        <div class="flex-grid mt-20">
          <div class="list-box" v-for="(item, index) in list" :key="index">
            <div class="title">
              <span>{{ index + 1 }}</span> {{ item.name }}
            </div>
            <div class="mb-20">{{ item.label }}</div>
          </div>
        </div>
      </div>
      <div class="left-row flex-1 pl-20">
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>应用场景
        </div>
        <div class="scene-list">
          <div class="list" v-for="(item, index) in sceneList" :key="index">
            <span class="img-box text-center"
              ><img :src="item.iconUrl" alt=""
            /></span>
            <span class="mb-10">{{ item.name }}</span>
            <span class="fs-12">{{ item.label }}</span>
          </div>
        </div>
        <div class="section-title">
          <svg-icon iconName="biaoti3" class="mr-10"></svg-icon>产品功能架构
        </div>
        <div class="mt-20"><img :src="frameworkImg" /></div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'nav1',
  data () {
    return {
      list: [
        { name: '高可用', label: '可用性SLA 99.99%，故障秒级切换' },
        {
          name: '高可靠',
          label: '实现数据库RPO为零方案，数据存储可靠性达到99.9999999%'
        },
        {
          name: '监控告警',
          label:
            '提供了多达45项的状态以及性能指标的监控，您可以通过管理控制台查看实例的资源和引擎监控数据，监控粒度达秒级。 丰富的告警策略可供定制，对异常情况可及时告警至管理员，保障系统安全。'
        },
        {
          name: '可视化管理',
          label:
            '用户可在管理控制台上实现实例生命周期内的相关管理，包括但不限于创建实例、续订实例、退订实例、重启数据库、实例配置管理。'
        },
        {
          name: '弹性扩展',
          label:
            '支持不停机弹性扩展，支持灾备实例和只读实例，提供简单易用的异地容灾服务以及扩展数据库读性能，分担主库压力。'
        },
        {
          name: '备份服务',
          label:
            '全面的数据库备份场景支持，支持物理备份、逻辑备份、自动备份以及手动备份。备份粒度达到库表级别。'
        },
        {
          name: '安全服务',
          label:
            '丰富的数据库安全能力保障，涵盖事前、事中、事后全场景，支持SSL加密，支持数据库安全SQL审计,实现对数据进行全方位安全保障。'
        },
        {
          name: '恢复服务',
          label:
            '丰富的多种数据恢复方案，支持按备份集恢复以及按时间点恢复。恢复的对象可以是全新实例，也可以是已有实例，恢复效率最快达分钟级。'
        }
      ],
      sceneList: [
        {
          iconUrl: require('../../assets/images/icon/ico-r3-001.png'),
          name: '基础版',
          label:
            '单机部署，适用于测试、个人学习场景，性价比高, 做到laaS的价格，PaaS的服务'
        },
        {
          iconUrl: require('../../assets/images/icon/ico-r3-002.png'),
          name: '高可用版',
          label:
            '双机资源部署，适用于绝大部分企业业务，生产环境数据库的最优选择'
        },
        {
          iconUrl: require('../../assets/images/icon/ico-r3-004.png'),
          name: '三节点企业版',
          label:
            '三台机器资源部署，适用于如金融、保险公司等对业务连续性、安全性能要求特高的业务、金融级数据安全，一主双备强一致性，真正做到数据零丢失方案'
        }
      ],
      frameworkImg: require('../../assets/images/pic/img-1.png')
    }
  }
}
</script>

<style scoped lang="scss">
.flex-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-row-gap: 20px;
  grid-column-gap: 20px;
}
.list {
  .img-box {
    display: block;
    width: 60px;
    height: 60px;
    img {
      width: 45px;
    }
  }
  &:last-child {
    img {
      width: 60px;
      margin-top: -8px;
    }
  }
}

.list-box {
}
</style>
